<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>el与data的两种写法</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				data与el的2种写法
						1.el有2种写法
									(1).第一种：new Vue时候配置el属性（css选择器字符串 或 亲自获取的DOM元素）。
									(2).第二种：先创建Vue实例，随后再通过：Vue实例.$mount('#demo')指定服务的容器。
									(3).如何选择？随意，只不过第二种更灵活一点
											例如：可以在Vue实例对象创建n秒以后，再指定容器。

						2.data有2种写法
									(1).对象式：
												data:{name:'尚硅谷'}
									(2).函数式：
												data(){
													return {
														name:'尚硅谷'
													}
												}
									如何选择? 目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
										
						3.一个重要的原则：
									由Vue管理的函数（现阶段我们只学了个data函数，别的没学呢），
									一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h1>学校名：{{name}}</h1>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		//el的第一种写法（new的时候直接传入el配置项）
		new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷'
			}
		})

		//el的第二种写法（先new，回头再通过$mount去指定服务的容器，稍显灵活）
		/* const v = new Vue({
			data:{
				name:'尚硅谷'
			}
		})
		setTimeout(function(){
			v.$mount('#demo')
		},3000) */

		//data的第一种写法（对象式）
		/* new Vue({
			el:'#demo',
			data:{
				name:'尚硅谷'
			}
		}) */

		//data的第二种写法（函数式）
		//现在我们觉得对象式的data真香啊（现在咋写都行），但是以后学到了组件，data必须要写成函数，否则Vue就罢工了。
		/* new Vue({
			el:'#demo',
			data(){ //倘若data写成了函数式，那么必须用普通函数，否则this会出问题。
				console.log('#',this) //此处的this是Vue实例对象（这是Vue内部帮我们做完的事）
				return {
					name:'尚硅谷'
				}
			}
		}) */

	</script>
</html>